<template>
  <div class="tabber">
    <div class="table_flex">
      <TabberItem
        v-for="(item,index) in tabberItem"
        :key="index"
        :item="item"
        :index="index"
        :SelectIndex="SelectIndex"
        @change="change"
      />
    </div>
  </div>
</template>

<script>
import TabberItem from "./TabberItem";
export default {
  components: {
    TabberItem,
  },
  props: {
    Items: {
      type: Array,
      required: true,
      validator: function (value) {
        return value.length <= 6;
      },
    },
    selectIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabberItem: this.Items,
      SelectIndex: this.selectIndex,
    };
  },
  methods: {
    change(index){
        this.SelectIndex = index
    }
  },
};
</script>

<style scoped>
.tabber {
  width: 100%;
  height: 64px;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid black;
  background-color: white;
}
.table_flex {
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>